<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表单 form  <form> 标签用于为用户输入创建 HTML 表单。 作用：表单用于向服务器传输数据。-->
    <!-- action	URL	规定当提交表单时向何处发送表单数据(服务器的地址)。 -->
    <!-- method="get/post" 客户端向服务器端发送请求的方式(1. get 会暴露表单的数据不安全  2. post 可以隐藏表单数据安全) -->
    <form action="" method="post">
        <!-- 表单元素 <input> 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。 -->
        <!-- 注意: 每个表单元素都要设置一个name属性，后于后台提取表单中的数据 -->
        <!-- 
            常用的属性：
            1. value 属性规定输入字段的初始值：
            2. placeholder 文本提示信息
            3. readonly 属性规定输入字段为只读（不能修改）：
            4. disabled 属性规定输入字段是禁用的。
            5. size 属性规定输入字段的尺寸（以字符计）：
            5. required 必填项
        
        
        -->
        用户名: <input type="text" name="username" placeholder="请输入一个用户名" required> <br>
        密码: <input type="password" name="pwd"> <br>
        性别: 男 <input type="radio" name="sex"> 女 <input type="radio" name="sex"> <br>
        爱好: 音乐 <input type="checkbox" name="hib">  运动 <input type="checkbox" name="hib">  读书 <input type="checkbox" name="hib"> <br>
        上传文件: <input type="file" name="file"> <br>
        编程语言:
                <!--下拉列表 select option列表项   -->
                <!-- <option selected>NodeJS</option> selected表示默认选中的项-->
                <select name="language">
                    <option>Java</option>
                    <option>JavaScript</option>
                    <option selected>NodeJS</option>
                    <option>CSS</option>
                </select> <br>

        回复:
        <textarea rows="3" cols="20">
            在w3school，你可以找到你所需要的所有的网站建设教程。
        </textarea> <br> 
        <button>就是一个普通的按钮不具有提交功能</button><br>     
        <input type="submit">  <input type="reset">
    </form>
</body>
</html>